<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>U币使用记录</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-pagination{
            text-align: center;
            margin-top: 45px;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background-color: #10a57d;
            color: #fff;
        }
    </style>
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }());
</script>
<body>
<div class="perCenter" id="app">
    <div class="per_left">
        <p><span class="bottom_color">首页</span> > <span>个人中心</span>  > <span>使用记录</span></p>
        <div class="data">
            <div class="photo">
                <img :src="info.real_avatar" alt=""/>
                <p>{{info.name}}</p>
            </div>
            <ul class="name">
                <a href="./task_center.html"><li  class="person"><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</li></a>
                <a href="./myVirtual.html"><li ><i class="icon iconfont icon-zhuji2"></i>我的虚拟机</li></a>
                <a href="./personalData.html"><li><i class="icon iconfont icon-gerenziliao"></i>个人资料</li></a>
                <a href="./invitedShare.html"><li> <i class="icon iconfont">&#xe690;</i>邀请分享</li></a>
                <a href="./password.html"><li> <i class="icon iconfont icon-xiugaimima"></i>修改密码</li></a>
            </ul>
        </div>
    </div>
    <div class="task" style="margin-top: 50px;">
        <p class="perTitle" style="border: none;"><i></i><span>U币使用记录</span></p>
        <ul class="usage">
            <li v-for="li in lists">
                <span class="reson">{{li.type}}:</span>
                <span class="integral">
                    <span v-if="li.is_cost == 1">+</span>
                    <span v-else>-</span>
                    <span style="color: #10a57d;margin: 0 5px">{{li.amount}}</span>U币</span>
                <span class="time">{{li.pay_time}}</span>
            </li>
        </ul>
        <el-pagination
                background
                :current-page="current"
                layout="prev, pager, next"
                :page-size="pager"
                :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange">
        </el-pagination>
    </div>
 </div>
<div class="footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    lists:[],
                    info:[],
                    reason:[],
//                    page:'1',
                    current:'1',
                    pager:'',
                    total:''

                }
            },
            mounted: function () {
                this.showData();
                this.pageI();
//需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
            },
            methods: {
                showData:function() {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                pageI:function(){
                    var _this = this;
                    get(url + 'user/wallet-logs?page='+_this.current, {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.lists = res.body.data.data
                                    _this.current = res.body.data.current
                                    _this.pager =  res.body.data.per_page
                                    _this.total = res.body.data.total
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                handleSizeChange:function(val){
                    console.log(val)
                },
                handleCurrentChange:function(val){
                    console.log(val)
                    this.current = val
                    this.pageI();
                }
            }
        })
    })()
    $('.footer').load("./footer.html")
</script>
</html>